<template>
    <div class="search-panel">
      <el-row class="m-header-searchbar">
        <el-col :span="3" class="left">
          <img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt="美团">
        </el-col>
        <el-col :span="15" class="center">
          <div class="wrapper">
            <el-input
              v-model="search"
              placeholder="搜索商家或地点"
              @focus="getFocus"
              @blur="loseFocus"
              @input="input"
            ></el-input>
            <button  class="el-button el-button--primary">
              <i class="el-icon-search"></i>
            </button>
            <dl v-if="ishotPlace" class="hotPlace">
              <dt>热门搜索</dt>
              <dd v-for="(item,index) in hotPlace.slice(0,5)" :key="index">
                <a :href="'/product?keyword='+encodeURIComponent(item.name)">{{item.name}}</a>
              </dd>
            </dl>
            <dl v-if="issuggset" class="searchList">
              <dd v-for="(item,index) in searchList" :key="index"><a :href="'/product?keyword='+encodeURIComponent(item.name)">{{item.name}}</a></dd>
            </dl>
          </div>
          <p class="suggset">
            <a :href="'/product?keyword='+encodeURIComponent(item.name)" v-for="(item,index) in hotPlace.slice(5,8)" :key="index" style="margin: 5px">{{item.name}}</a>
          </p>
          <ul class="nav">
            <li>
              <nuxt-link to="/me" class="takeout">美团外卖</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/me" class="movie">猫眼电影</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/me" class="hotel">美团酒店</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/me" class="apartment">民宿/公寓</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/me" class="business">商家入驻</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/me">美团公益</nuxt-link>
            </li>
          </ul>
        </el-col>
        <el-col :span="6" class="right">
          <ul class="security">
            <li>
              <i class="refund">
                <p class="txt">随时退</p>
              </i>
            </li>
            <li>
              <i class="single">
                <p class="txt">不满意免单</p>
              </i>
            </li>
            <li>
              <i class="overdue">
                <p class="txt">过期退</p>
              </i>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
</template>

<script type="text/ecmascript-6">
  import _ from 'lodash'
  import axios from "../../../.nuxt/axios";
export default {
  data () {
    return {
      isFocus: false,
      search: '',
      searchList: []
    }
  },
  computed: {
    ishotPlace () {
      return this.isFocus&&!this.search
    },
    issuggset () {
      return this.isFocus&&this.search
    },
    hotPlace () {
      return this.$store.state.home.hotPlace
    }
  },
  methods: {
    getFocus () {
      this.isFocus = true
    },
    loseFocus () {
      setTimeout(() => {
        this.isFocus = false
      }, 200)
    },
    input:_.debounce(async function () {
      let that = this
      let city = that.$store.state.geo.position.city.replace('市', '')
      that.searchList = []
      let {status, data:{top}} = await that.$axios.get('http://localhost:3200/search/top', {
        params: {
          input: that.search,
          city
        }
      })
      that.searchList = top.slice(0,10)
    },300)
  }
}
</script>

<style lang="scss">
.m-header-searchbar{
  display: flex;
}
</style>
